import React, { memo, useState } from 'react'
import { shallowEqual, useSelector } from 'react-redux'
import { AlbumInfoWrapper, ContentWrapper ,IntroWrapper} from './style'
import { formatImg, formatTime } from '@/utils/format'
import OperationBar from '@/components/operation-bar'
export default memo(function AlbumInfo() {
  const [isShowAll, setIsShowAll] = useState(false);
  const { albumDetail } = useSelector(state => ({
    albumDetail:state.getIn(['album','albumDetail'])
  }), shallowEqual)
  const changeShow = () => {
    setIsShowAll(!isShowAll)
  }
  const info = albumDetail || {}
  return (
    <AlbumInfoWrapper>
      <ContentWrapper>
      <div className="left">
        <img src={formatImg(info.picUrl, 177)} alt="" />
        <div className="mask sprite_covor"></div>
      </div>
      <div className="right">
        <div className="title">
          <i className='icon sprite_icon2'></i>
          <h2 className='name'>{info.name}</h2>
        </div>
        <div className="artist">
            歌手：<span className='artist_name'>{info.artist?.name}</span>
        </div>
        <div className="publishtime">
            发行时间：{formatTime(info.publishTime,'yyyy-MM-dd')}
        </div>
        <OperationBar favorCount="收藏"
            shareCount={info.info?.shareCount}
            downloadCount="下载"
            commentCount={info.info?.commentCount}
          />
      </div>
      </ContentWrapper>
      {
        info.description !== '' ? <IntroWrapper isShowAll={isShowAll}>
        <h3 className='title'>专辑介绍:</h3>
        <p className='content text-nowrap'>{info.description}</p>
        <div className='btn' onClick={e => changeShow()}>{isShowAll? '收起':'展开'}</div>
      </IntroWrapper> : null
      }
    </AlbumInfoWrapper>
  )
})
